import PropTypes from "prop-types"
import "@/assets/style.scss"

function Button(props) {
  let { type, children } = props;
  return (
    <div className="ml-button">
      <span className={type}>{children}</span>
    </div>
  )
}

Button.propTypes = {
  type: PropTypes.oneOf(['default', 'primary', 'danger', 'info']),
  children: PropTypes.node,
}

Button.defaultProps = {
  type: "default",
  children: '按钮',
}

// 弹窗也会不同类别的弹窗
//   1）confirm弹窗  带一个确定button
//   2）danger弹窗  带一个红色的残忍离开的button
//   3）info弹窗  xxxx
function Modal(props) {
  let { title, closable, children, type } = props;
  // 根据不同的弹窗，需要渲染不同的按钮组
  // 写一个渲染函数
  let renderFooter = () => {
    let btns = [];
    switch (type) {
      case "confirm":
        btns = [
          <Button type="primary" key="1">确定</Button>,
          <Button key="2">取消</Button>
        ]
        break;
      case "danger":
        btns = [
          <Button type="danger" key="1">删除</Button>,
          <Button key="2">取消</Button>
        ]
        break;
      case "info":
        btns = [
          <Button type="info" key="1">我知道了</Button>
        ]
        break;
    }
    return btns;
  }
  return (
    <div className="ml-layer">
      <div className="ml-modal">
        <header>
          <div>
            <div>{title}</div>
            <div>{closable && "X"}</div>
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          {/* <Button type="primary">确定</Button>
          <Button type="danger">取消</Button> */}
          {renderFooter()}
        </footer>
      </div>
    </div>
  )
}

Modal.propTypes = {
  title: PropTypes.node,
  closable: PropTypes.bool,
  children: PropTypes.node,
  type: PropTypes.oneOf(["confirm", "danger", "info"])
}

Modal.defaultProps = {
  title: "默认小标题",
  closable: true,
  children: <div>主体内容的默认值</div>,
  type: "info"
}

function DemoA() {
  return (
    <div>
      <button>open modal</button>
      <Modal type="info" closable title={<span style={{ color: "red" }}>删除用户</span>}>
        <div>
          <input type="text" />
          <div>你确定要添加此用户吗?</div>
        </div>
      </Modal>
    </div>
  )
}

export default DemoA;